<template>
  <van-tabbar v-model="active" fixed route active-color="”#6689e2“">
    <van-tabbar-item
      v-for="(item, index) in tabbars"
      :to="item.to"
      :key="index"
    >
      <template #icon="props">
        <img :src="props.active ? item.icon_active : item.icon" />
        <span class="tab-name">{{ item.title }}</span>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  defaultActive: {
    type: Number,
    default: 0
  },
  tabbars: {
    type: Array, // 类型断言
    default: () => {
      return []
    }
  }
})
// console.log(props.tabbars)
props.tabbars.forEach((item) => {
  console.log(item.icon)
})
const active = ref(props.defaultActive)
</script>

<style lang="less" scoped>
.tab-name {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}
</style>
